<template>
  <div class="topicon" :style="{backgroundImage: images[value-1]}">
    <div class="topicon-top" :style="{color: colors[value-1]}">TOP</div>
    <div class="topicon-num">0{{value}}</div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      images: [
        "url()",
        "url()",
        "url()"
      ],
      colors: ["#E9AE46", "#B3AEA5", "#D87C4D"]
    };
  }
};
</script>

<style lang="scss">
.topicon {
  margin-top: 15px;
  width: 29px;
  height: 41px;
  text-align: center;
  font-weight: bold;
  font-family: Helvetica, Arial, sans-serif;
  background-size: contain;
  &-num {
    color: #fff;
    font-size: 16px;
    margin-top: -5px;
  }
}
</style>